<template>
  <div class="mainPage">
    <div class="align-center">
      <div class="simulator" :style="{ transform: zoom }">
        <div class="simulatorTop"></div>
        <div id="simulatorMain" ref="simulatorMain" class="main">
          <div
            :style="{
              display: isShowStick ? 'block' : 'none',
            }"
            class="stick_btn"
            @click="scrollToTop"
          ></div>
          <div id="page4main-bg" class="mainBg" :style="{ ...bgColor }">
            <atmosphere v-if="pageContent.atmosphere" class="innerAt" />
            <draggable
              class="dragArea list-group"
              :list="componentList"
              v-bind="dragOptions"
              @start="dragStart"
              @change="dragChange"
              @end="dragEnd"
            >
              <!-- 组件作用区域 -->
              <div
                v-for="(item, index) in componentList"
                :key="item._id"
                class="item"
                @click="selectItem(item)"
              >
                <div class="component-name">
                  {{ item.name }}-{{ item._id.substring(item._id.length-4) }}
                </div>

                <div class="component-del">
                  <i
                    class="remove-element-btn el-icon-delete"
                    @click="removeAt(index)"
                  ></i>
                </div>
                <!-- v-if="(index === 0 && isSaving) || !isSaving" -->
                <component
                  :is="item.code"
                 
                  :ref="item._id"
                  :component-id="item._id"
                  :activity-code="activityCode"
                  :class="{ selecton: item._id === selectedComponent._id }"
                />
              </div>
            </draggable>
          </div>
        </div>
        <div class="simulatorBottom">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import draggable from 'vuedraggable'
import tool from '@/util/tool'
import $ from 'jquery'
import { componentStack } from '@/util/biz/componentStack'

export default {
  components: {
    draggable,
    ...componentStack,
  },
  data () {
    return {
      componentList: [],
      activityCode: '',
      isShowStick: false,
      pageConfigVisible: false,
      drag: false,
      zoomNum: '1',
    }
  },
  computed: {
    ...mapGetters('step', ['steps']),
    ...mapGetters('main', ['pageContent', 'isSaving', 'selectedComponent']),
    dragOptions () {
      return {
        animation: 200,
        group: 'simulatorDemo',
        disabled: false,
        ghostClass: 'ghost',
      }
    },
    zoom () {
      return 'scale(' + this.zoomNum + ')'
    },
    stepsl () {
      return this.steps.length
    },
    componentData () {
      return JSON.stringify(this.pageContent.componentList)
    },
    isStick () {
      return this.pageContent.isStick
    },
    bgColor () {
      let _this = this
      let content = _this.pageContent
      if (_this.pageContent.background) {
        content = _this.pageContent.background
      }

      if (content.bgStartColor && content.bgEndColor) {
        let h = $('#page4main-bg').height()

        let bgMidColor = content.bgMidColor ? content.bgMidColor : content.bgEndColor

        let bgStartPosition =
          content.bgStartPosition === null
            ? 0
            : content.bgStartPosition
        let bgMidPosition =
          content.bgMidPosition === null
            ? 50
            : content.bgMidPosition
        let bgEndPosition =
          content.bgEndPosition === null
            ? 100
            : content.bgEndPosition
        let unit = content.bgType === 2 ? 'px' : '%'
        let bgText = `linear-gradient(${content.bgStartColor} ${bgStartPosition + unit
        },${bgMidColor} ${bgMidPosition + unit},${content.bgEndColor
        } ${bgEndPosition + unit})`
        return {
          background: bgText,
          backgroundSize: '100% 100%',
          backgroundRepeat: 'no-repeat',
          minHeight: h + 'px',
        }
      } else {
        return null
      }
    },
  },
  watch: {
    componentData (value) {
      this.componentList = JSON.parse(value)
    },
    isStick (value) {
      console.log('isStick变化：' + value)
      if ($('.mainPage').scrollTop() && value) {
        this.isShowStick = true
      } else {
        this.isShowStick = false
      }
    },
  },
  created () {
    this.activityCode = tool.getUrlParam('activityCode')
  },
  mounted () {
    $('.mainPage').css('max-height', document.body.clientHeight - 80 + 'px')
    $('.mainPage').on('scroll', this.scroll)
  },
  methods: {
    ...mapMutations('main', [
      'editPage',
      'removeComponent',
      'selectComponent',
      'editComponent',
      'editPage',
    ]),
    ...mapMutations('step', ['stepsAdd1']),
    openPageConfig () {
      this.pageConfigVisible = true
    },
    dragChange () {
      this.editPage({ field: 'componentList', value: this.componentList })
      this.selectComponent({})
    },
    selectItem (item) {
      // this.selectComponent(item);
      let node = this.pageContent.componentList.find((a) => a._id === item._id)
      this.selectComponent(node)
    },
    dragStart () {
      return
    },
    dragEnd () {
      return
    },
    // 移除元素
    removeAt (index) {
      this.$confirm('此操作将删除该元素, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.removeComponent(index)
        })
        .catch(() => { })
    },
    zoomIn () {
      if (parseFloat(this.zoomNum) >= 2) {
        return
      }
      this.zoomNum = parseFloat(this.zoomNum) + 0.1
      return this.zoomNum
    },
    zoomOut () {
      if (parseFloat(this.zoomNum) <= 0.2) {
        return
      }
      this.zoomNum = parseFloat(this.zoomNum) - 0.1
      return this.zoomNum
    },

    scroll () {
      if ($('.mainPage').scrollTop() > 0 && this.pageContent.isStick) {
        this.isShowStick = true
      } else {
        this.isShowStick = false
      }
    },
    scrollToTop () {
      document.querySelector('.mainPage').scrollTo({
        left: 0,
        top: 0,
        behavior: 'smooth',
      })
    },
  },
}
</script>

<style lang="less">
.selecton {
  border: 1px dotted black;
}
.selecton:focus {
  outline: none;
}

.align-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.mainPage {
  display: flex;
  flex-direction: row;
  overflow: auto;

  position: relative;

  .popup-preview {
    padding: 30px;
    box-sizing: border-box;
    flex: 1;
    height: auto;
  }
  .zoom {
    color: #fff;
    position: absolute;
    font-size: 30px;
    right: 20px;
    top: 5px;
    z-index: 5;
  }
}
.simulator {
  width: 380px; //320px
  .simulatorTop {
    width: 380px; //320px
    // height: 34px;
    height: 76px;
    // background: url(~@/assets/image/switchViews.png) no-repeat left -159px;
    // background-size: 380px 200px;
    background: url(~@/assets/image/phoneTop.jpeg) no-repeat;
    background-size: 110%;
    background-position: -0.36rem 0;
  }
  .main {
    .stick_btn {
      width: 55px !important;
      height: 55px !important;
      position: fixed;
      bottom: 40px;
      right: 40px;
      background-image: url(~@/assets/image/stick.png);
      background-size: cover;
    }

    //height: 568px;
    min-height: 603px;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .dragArea {
      min-height: 100px;
      // position: absolute;
    }
    .mainBg {
      flex: 1;
      border: 6px solid #000;
      border-bottom: 0;
      border-top: 0;
      // overflow: auto;

      &::-webkit-scrollbar {
        width: 1px;
        height: 1px;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        background: #ededed;
      }
      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        background: #535353;
      }
    }
  }
  .simulatorBottom {
    cursor: pointer;
    width: 380px; //320px
    height: 50px;
    line-height: 58px;
    border-top: 1px solid #f0f0f0;
    text-align: center;
    background: url(~@/assets/image/phoneBt.png) no-repeat;
    // background-size: cover;
    // background-size: 380px 200px;
    background-size: 112%;
    background-position-x: -0.4rem;;
    &:hover {
      span {
        display: block;
      }
    }
    span {
      border-radius: 0 0 30px 30px;
      display: none;
      color: #fff;
      background: #000;
      opacity: 0.7;
      font-size: 16px;
    }
  }
  .flip-list-move {
    transition: transform 0.5s;
  }
  .no-move {
    transition: transform 0s;
  }
  .ghost {
    opacity: 0.5;
    background: #c8ebfb;
  }
  .dragArea .item {
    // position: relative;
    cursor: move;
    margin: 3px;
    // &:hover {
    //   .remove-element-btn {
    //     display: block;
    //   }
    //   .component-name {
    //     // display: none;
    //   }
    // }
  }
  .remove-element-btn {
    // display: none;
    font-size: 14px;
    padding: 5px;
    border-radius: 50%;
    background: #ccc;
    position: absolute;
    z-index: 100;
    right: 0;
    top: 0;
    cursor: pointer;
  }
  .component-name {
    font-size: 14px;
    padding: 5px;
    position: absolute;
    width: 105px;
    right: 385px;
    text-align: center;
    background-color: white;
    border: 1px solid #ccc;
    cursor: pointer;
  }
  .component-name::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 110px;
    width: 10px;
    height: 10px;
    margin-top: -6px;
    background: inherit;
    /*自动继承父元素的背景*/
    transform: rotate(45deg);
    border: 1px solid #ccc;
    background-color: white;
    border-left-width: 0px;
    border-bottom-width: 0px;
  }
  .component-del {
    padding: 5px;
    position: absolute;
    right: -30px;
  }
}
</style>

<style lang="less">
.mainPage {
  .el-tabs__nav-wrap {
    width: 360px;
  }
  .el-tabs__item {
    color: #ccc;
  }
  .page-title {
    text-align: center;
    height: 0.8rem;
    line-height: 0.8rem;
    background: #f5f7fa;
    color: #333;
    position: relative;
    > div {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 0.8rem;
      z-index: 1;
      background: #333;
      opacity: 0;
    }
  }
}
.el-main {
  padding: 10px 20px !important;
}
.popupShowInEditor {
  display: block !important;
  transform: translate(480px, 70px);
  transform-origin: 0 0;
  position: fixed;
  &#rule-popup-box {
    // top: 237px;
    .rule-content {
      height: 170px !important;
    }
  }
  &.sms-popup-box {
    top: 380px;
  }
}
.activity-footer {
  position: relative;
  &:after {
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #333;
    opacity: 0;
  }
}
.none {
  display: none !important;
}
#topBar {
  position: absolute;
  top: 68px !important;
}
.appDownBtn {
  display: block;
}
.simulator {
  transform-origin: 0 0;
}
</style>
